<template>
	<view>
		<view class="frombox">
			<view class="specbox" v-for="(spec, index) in specification" :key="spec.id">
				<view class="namebox">
					<view class="titlbox">规格名</view>
					<view class="inputbox">
						<input type="number" v-model.trim="spec.value" placeholder="请输入规格名" />
						<view class="remove" @click="delSepc(index)">×</view>
					</view>
				</view>
				<view class="valuebox">
					<view class="titlbox">规格值</view>
					<view class="itemvalue" v-for="(option,option_index) in spec.leaf" :key="option_index">
						<input v-model.trim="option.value" :style="{'width': '110px' }"></input>
						<view class="sku_item">
							<view class="remove" @click.stop="delOption(index,option_index)">×</view>
							<!-- <view class="text">
								{{ option.value }}
							</view> -->
						</view>
					</view>
					<input class="input" v-model="addValues[index]" placeholder="多个产品属性以空格隔开" @keyup.native.enter="
						        addOption(index)
						        " @blur="addOption(index)"></input>
				</view>
			</view>
			<view class="butont">
				<view @click="addSpec">添加规格项目</view>
			</view>
		</view>
		<view class="frombox" v-for="(item,index) in specificationFilter" :key="index">
			<view class="fromitem">
				<view>商品规格名</view>
				<input type="number" v-model="item.value" placeholder="请输入(元)" />
			</view>
			<view v-for="(s,sindex) in item.leaf" :key="sindex">
				<view class="fromitem">
					<view>规格值</view>
					<input type="number" v-model="s.value" placeholder="请输入(元)" />
				</view>
				<view class="starimgbox" v-if="s.images.length==0">
					<view class="uploadimg" @click="uploadimg(s)">
						<image src="../static/xj.png"></image>
						<view>商品图片</view>
					</view>
				</view>
				<view class="imgbox" v-else>
					<view class="imglist" v-for="(imgitem,imgindex) in s.images" :key="imgindex">
						<image :src="imgitem.full_url" style="border-radius: 16rpx;"></image>
						<image class="closen" src="../static/gb.png" @click="spliceimg(s,imgindex)"></image>
					</view>
					<view class="imglist" @click="uploadimg(s)" style="border:2rpx dashed #999999,width:33%" v-if="s.images.length<6">
						<image style="width: 66rpx;height: 60rpx; margin: 50rpx 0 10rpx 0;" src="../static/xj1.png">
						</image>
						<view>添加图片</view>
					</view>
				</view>
				<view class="fromitem">
					<view>商品价格</view>
					<input type="number" v-model="s.goods_price" placeholder="请输入(元)" />
				</view>
				<view class="fromitem">
					<view>划线价</view>
					<input type="number" v-model="s.line_price" placeholder="请输入(元)" />
				</view>
				<view class="fromitem" style="border: none;">
					<view>库存量</view>
					<input v-model="s.stock_num" type="number" placeholder="请输入" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "manyspec",
		data() {
			return {
				specification: [],
				addValues: [],
				images: [],
			};
		},
		computed: {
			// 过滤掉属性名和属性值为空的数据规格项目
			specificationFilter() {
				let specificationFilter = []
				console.log(this.specification, 'this.specification')
				// return this.specification.filter(
				// 	item => item.value && item.leaf.length
				// );
				specificationFilter = this.specification.filter(
					item => item.value && item.leaf.length
				);
				// this.specification.forEach(item => {
				// 	if (item.value && item.leaf.length) {
				// 		specificationFilter.push(item)
				// 	}
				// })
				if(specificationFilter.length){
					this.$emit('handlemang',specificationFilter)
				}
				console.log(specificationFilter, 'specificationFilter', this.specification)
				return specificationFilter
			}
		},
		methods: {
			addSpec() {
				this.specification.push({
					id: this.createUniqueString() + "_id",
					value: "",
					leaf: [],
				});
			},
			createUniqueString() {
				const timestamp = +new Date() + ''
				const randomNum = parseInt((1 + Math.random()) * 65536) + ''
				return (+(randomNum + timestamp)).toString(32)
			},
			delSepc(index) {
				this.specification.splice(index, 1);
			},
			delOption(spec_index, option_index) {
				this.specification[spec_index].leaf.splice(option_index, 1);
			},
			addOption(index) {
				let str = this.addValues[index] || "";
				str = str.trim();
				if (!str) return;
				const oldArr = this.specification[index].leaf;
				const arr = str
					.split(/\s+/) // 使用空格分割成数组
					.filter(value => !oldArr.some(option => option.value === value)) // 过滤掉 oldArr 已存在的 value
					.map(value => ({
						id: this.createUniqueString() + "_id",
						value,
						images: [],
						goods_price: '',
						line_price: '',
						stock_num: '',
					})); // 把 value 转成对象，id 设置为 null
				this.specification[index].leaf = this.uniqueArr([...oldArr, ...arr]);
				this.$set(this.addValues, index, "", );
			},
			uniqueArr(arr) {
				return Array.from(new Set(arr))
			},
			uploadimg(s) {
				console.log(s,'s')
				this.$uploads(1).then(res => {
					console.log(res,'res')
					s.images.push(...res)
					// console.log(s.images, 'this.images', res) //item.file.full_url
				})
			},
			//删除图片
			spliceimg(s,index) {
				s.images.splice(index, 1)
			},
		}
	}
</script>

<style lang="scss">
	.starimgbox {
		width: 690rpx;
		padding: 25rpx 30rpx;
		height: 268rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
		opacity: 1;

		.uploadimg {
			width: 690rpx;
			height: 218rpx;
			border: 2rpx dashed #999999;
			text-align: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #888888;

			image {
				width: 66rpx;
				height: 60rpx;
				margin: 50rpx 0 28rpx 0;
			}
		}
	}

	.imgbox {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.imglist {
			width: 33.3%;
			text-align: center;
			position: relative;

			image {
				width: 208rpx;
				height: 208rpx;
			}

			.closen {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 10rpx;
				top: 0;
			}
		}
	}

	.frombox {
		width: 690rpx;
		padding: 0 30rpx;
		background: #FFFFFF;
		margin-top: 22rpx;

		.specbox {
			.namebox {
				.titlbox {
					height: 80rpx;
					color: #222222;
					font-size: 28rpx;
					line-height: 80rpx;
				}

				.inputbox {
					display: flex;
					align-items: center;
					justify-content: space-between;

					>input {
						width: 360rpx;
					}
				}
			}

			.valuebox {
				.titlbox {
					height: 80rpx;
					color: #222222;
					font-size: 28rpx;
					line-height: 80rpx;
				}

				.itemvalue {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
				}

				>input {
					width: 360rpx;
				}
			}
		}

		.fromitem {
			display: flex;
			align-items: center;
			height: 106rpx;
			justify-content: space-between;
			border-bottom: #ECECEC solid 2rpx;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #555555;

			>input {
				text-align: right;
			}

			.radiobox {
				display: flex;
				align-items: center;

				.radioitem {
					display: flex;
					align-items: center;
					width: 160rpx;

					image {
						width: 36rpx;
						height: 36rpx;
						border-radius: 100%;
						margin-right: 20rpx;
					}
				}
			}
		}
		.starimgbox {
			width: 690rpx;
			padding: 25rpx 0rpx;
			height: 268rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 10rpx 10rpx;
			opacity: 1;
		
			.uploadimg {
				width: 690rpx;
				height: 218rpx;
				border: 2rpx dashed #999999;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #888888;
		
				image {
					width: 66rpx;
					height: 60rpx;
					margin: 50rpx 0 28rpx 0;
				}
			}
		}
		
		.imgbox {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
		
			.imglist {
				width: 33.3%;
				text-align: center;
				position: relative;
		
				image {
					width: 208rpx;
					height: 208rpx;
				}
		
				.closen {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 10rpx;
					top: 0;
				}
			}
		}

		.butont {
			display: flex;
			align-items: center;
			height: 106rpx;

			>view {
				width: fit-content;
				padding: 0 30rpx;
				background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
				color: #FFF;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
			}
		}
	}
</style>